<template>
  <view class="container">
		<!-- <down-load-app-com ></down-load-app-com> -->
    <product-search-input-com
        v-model="searchVal"
        :is-input-show="true"
        :init-text="initText"
        :config="{backgroundColor: '#f1f1f1'}"
        @search="onSearchConfirm"
        @clear="onSearchClear"
        @cancel="onSearchCancel"
    ></product-search-input-com>

    <view class="search-history" v-if="isHistoryShow">
      <product-search-history-com
          @tapped="onSearchTapped"
      ></product-search-history-com>
    </view>

    <view class="search-result" v-if="isResultShow">
      <product-search-result-com
          :products="pageItems"
          :search-val="searchVal"
      ></product-search-result-com>
    </view>

  </view>
</template>

<script>
import store from 'store'
import { mapGetters } from  'vuex'
import CurrentUser from "mixins/CurrentUser"
import Pagination from "mixins/Pagination"
import ProductSearchInputCom from "components/product/search/ProductSearchInputCom"
import ProductSearchHistoryCom from "components/product/search/ProductSearchHistoryCom"
import ProductSearchResultCom from "components/product/search/ProductSearchResultCom"
import {guestGetProducts, userGetProducts,userGetProductsSearch} from "api/productApi"


export default {
	store,
  mixins: [CurrentUser, Pagination],
  components: {
    ProductSearchHistoryCom,
    ProductSearchInputCom,
    ProductSearchResultCom
  },
  data: () => ({
    isUserLogin: false,
    isHistoryShow: false,
    isResultShow: false,
    initText: '请搜索',
    searchVal: '',
    searchHistories: []
  }),
  methods: {
    onSearchConfirm(val) {
      this.searchVal = val ? val : this.initText
      if (this.searchVal) {
        this.isHistoryShow = false
        this.isResultShow = true

        this.initPage()
        this.loadPageData()
      }
    },
    onSearchClear() {
      this.isHistoryShow = true
      this.isResultShow = false
    },
    onSearchCancel() {
      this.isHistoryShow = true
      this.isResultShow = false
    },
    onSearchTapped(word) {
      this.searchVal = word
      if (word) {
        this.isHistoryShow = false
        this.isResultShow = true
        this.initPage()
        this.loadPageData()
      }
    },
    async loadPageItems() {
      if (this.isUserLogin) {
        return await userGetProductsSearch({
          // page: this.pageNumber,
          keyword: this.searchVal,
        })
      } else {
        return await userGetProductsSearch({
          // page: this.pageNumber,
          keyword: this.searchVal,
        })
      }
    }
  },
  async onShow() {
    if (await this.isLogin) {
      this.isUserLogin = true
      this.isHistoryShow = true
      this.isResultShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .search-history {

  }
  .search-result {
    padding: 18rpx;
  }
}
</style>
